<script>
import { defineComponent, reactive, ref, toRaw } from 'vue'
import * as Antd from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'

import { authUserRoleList } from '@Config/server/api'
import { message } from 'ant-design-vue'
import { Messages } from '@Config/config'
export default defineComponent({
  emits: ['close', 'result'],
  setup(props, context) {
    let users = reactive({
      data: [],
    })
    authUserRoleList({ size: 10000, index: 1, canBind: true, isMenu: 1 }).then(
      (_users) => {
        users.data = _users.data.records.map((x) => {
          return {
            ...x,
            label: x.nickname,
            value: x.id,
          }
        })
        users_ui.source = users.data
      }
    )

    let users_ui = reactive({
      key: 'fileType',
      initValue: [],
      source: users.data,
      uiType: 'select',
      col: { span: 24 },
      formItem: { label: '好友名称' },
      attr: {
        placeholder: '好友名称',
        mode: 'multiple',
      },
      rule: [
        {
          required: true,
          message: '请选择分享好友',
        },
      ],
    })
    let form_config = [
      users_ui,
      {
        key: 'effectDate',
        initValue: 1,
        uiType: 'radio',
        source: [
          {
            label: '1天',
            value: 1,
          },
          {
            label: '3天',
            value: 3,
          },
          {
            label: '7天',
            value: 7,
          },
          {
            label: '一个月',
            value: 30,
          },
          {
            label: '永久',
            value: -1,
          },
        ],
        col: { span: 24 },
        formItem: { label: '有效期' },
        attr: {
          placeholder: '有效期',
        },
      },
    ]

    let form_state = reactive({ data: MakeFormState(form_config) })
    let _bak_statue = { ...toRaw(form_state.data) }

    let submitHandler = () => {
      form_ref.value.validate().then(() => {
        Messages.add(message.success('分享成功'))
        setTimeout(() => {
          context.emit('close')
        }, 300)
      })
    }
    let cancelHandler = () => {
      context.emit('close')
    }
    let form_ref = ref()
    return {
      form_config,
      form_state,
      users,
      submitHandler,
      cancelHandler,
      form_ref,
    }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            class="search_form"
            formConfig={this.form_config}
            value={this.form_state.data}
            enterCallBack={() => {
              // this.pagination.data.current = 1
              //  this.searchData()
            }}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button type="primary" onClick={this.submitHandler}>
              分享
            </Antd.Button>
            <Antd.Button type="primary" danger onClick={this.cancelHandler}>
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
